<template>
  <div class="city">
    <van-popup
      v-model="showCity"
      position="right"
      :overlay="false"
      :style="{ width: '100%',
      height:'100%' }"
    >
      <van-nav-bar
        title="城市选择"
        left-text="返回"
        left-arrow
        @click-left="close"
      />
      <van-search
        v-model="value"
        placeholder="请输入地址"
        show-action
        @search="close"
      >
        <div
          slot="action"
          @click="close"
        >{{$store.state.city}}</div>
      </van-search>
      <div class="area">
        <van-index-bar :index-list="indexList">
          <div
            v-for="(list,index) in cityList"
            :key="index"
          >
            <van-index-anchor :index='indexList[index]'>{{indexList[index]}}</van-index-anchor>
            <div
              v-for="city in list.cities"
              :key="city.idx"
            >
              <van-cell
                :title="city.name"
                @click="choseCity(city.name)"
              />
            </div>
          </div>
        </van-index-bar>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "",
    indexList: [],
    cityList: []
    // cityname: '长沙'
  }),
  props: ["showCity"],
  created() {
    this.getAllCity();
  },
  methods: {
    close() {
      this.$emit("change-city", !this.showCity);
    },
    async getAllCity() {
      const {
        data: { alphabet, cityList }
      } = await this.$axios.get("api/getcity");
      this.indexList = alphabet;
      this.cityList = cityList;
    },
    choseCity(cityname) {
      this.$store.dispatch("changeCity", cityname);
      this.$emit("change-city", !this.showCity);
    }
  }
};
</script>
<style lang="less" scoped>
.city {
  .van-popup--right {
    top: 50%;
    .area {
      height: 567px;
      width: 100%;
      overflow: auto;
    }
  }
  .van-search__action {
    height: 34px;
    overflow: hidden;
  }
}
</style>